import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        //这里用于存储数据
        menuList:[],
        userInfo:{}
    },
    mutations:{
        //保存菜单数据
        //这里收到来自actions 的数据
        //然后调用state，把数据传进去给到state
        saveMenuList(state,menuList){
            state.menuList = menuList
        },

        //保存用户信息
        saveUserInfo(state,info){
            state.userInfo = info
        },
        //退出将数据清空
        userLogout(state){
            state.userInfo = {}
        }
    },
    actions:{   //确定动作，把要做的事情，指定到mutations中某个函数中使用
             //这里是向后端接口请求了数据，并把数据扔给mutations中的saveMenuList函数
          //调用接口获得菜单数据
        getMenuList({commit},params = {}){
            return new Promise((resolve,reject)=>{
                axios.get('/api/menulist',{params:params})
                .then((result)=>{
                    console.log(result)
                    commit('saveMenuList',result.data.list)
                    resolve(result)
                })
                .catch((err)=>{
                    console.log(err)
                    reject(err)
                  })
                })
        },

        // 用户登录
        userLogin({commit},params= {}){
            return new Promise((resolve,reject)=>{
                axios.post("/api/userlogin",params)
                .then((result)=>{
                    console.log(result)
                    commit('saveUserInfo',result.data.list)
                    resolve(result)
                }).catch((err)=>{
                    // console.log(err)
                    reject(err)
                })
            })
        }, 
    },

    //插件  createPersistedState 实现store数据保存在localStorage
    plugins:[createPersistedState()]

})

export default store;
